<script>
import {defineComponent} from 'vue'
import jsonData from '../../cart.json'

export default defineComponent({
    name: "TestViem",
    data() {
        return {
            data: jsonData,
            list: [],
        }
    },
    methods: {
        changeCheckout(item) {
            item.checkout = !item.checkout;
        },
        checkAll(){
            this.list.forEach(item=>{
                item.checkout=true;
            })
        },
    },
    created() {
        this.list = this.data.shoppingCartList.map(item => {
            return {...item.course, checkout: false}
        })
        console.log(this.list)
    },
    computed:{
       price(){
            return (this.list.filter(item=>{
                return item.checkout
            }).reduce((sum,item)=>{
                return sum+item.discountPrice
            },0)).toFixed(2)
        }
    },
})
</script>

<template>
    <div>
        <div v-for="item in list" :key="item.id" style="overflow: hidden;border: 1px solid red;width: 450px" @click="changeCheckout(item)">
            <div style="float: left">
                <img :src="item.bannerFileUrl" style="width: 120px;height: 80px">
            </div>
          <div style="margin-left: 150px">
              <span>{{item.courseTitle}}</span>
              <div style="height: 40px"></div>
              <input type="checkbox" :checked="item.checkout" >
              <span>现价:{{ item.discountPrice }}<del>原价:{{ item.coursePrice }}</del></span>
          </div>

        </div>
        <button @click="checkAll" style="margin-right: 50px">全选</button>
        <span style="font-size: 30px">总计:{{ price }}</span>


    </div>
</template>

<style scoped lang="less">

</style>